<template>
  <el-menu :default-openeds="['1', '3']" style="min-height: 100vh; overflow: hidden"
           background-color="rgb(48, 65, 86)"
           text-color="#fff"
           active-text-color="#ffd04b"
           :collapse-transition="false"
           :collapse="isCollapse"
           router>
    <div style="height: 60px;line-height: 60px;margin-left: 25px">
      <img v-if="!isCollapse" src="../../assets/logo.png"
           style="width: 50px;position:relative;top: 18px;margin-right: 5px;margin-left: -17px">
      <img v-else src="../../assets/logo.png"
           style="width: 50px;position:relative;top: 18px;margin-right: 5px;margin-left: -17px">
      <b style="color: white;margin-top: -10px" v-show="!isCollapse">智课汇</b>
    </div>

    <!--    导航栏-->
    <div v-for="item in menuList" :key="item.getId">
      <div v-if="item.path">
        <el-menu-item :index="item.path">
          <i :class="item.icon"></i><span slot="title">{{item.name}}</span>
        </el-menu-item>
      </div>
     <div v-else>
       <el-submenu :index="item.id+''">
         <template slot="title">
           <i :class="item.icon"></i><span slot="title">{{item.name}}</span>
         </template>
         <div v-for="itemChildren in item.children" :key="itemChildren.getId">
           <el-menu-item :index="itemChildren.path">
             <i :class="itemChildren.icon"></i>{{itemChildren.name}}
           </el-menu-item>
         </div>
       </el-submenu>
     </div>
    </div>

<!--    <el-menu-item index="/">-->
<!--      <i class="el-icon-s-home"></i><span slot="title">主页面</span>-->
<!--    </el-menu-item>-->
<!--    <el-submenu>-->
<!--      <template slot="title">-->
<!--        <i class="el-icon-s-grid"></i><span slot="title">系统管理</span>-->
<!--      </template>-->
<!--      <el-menu-item index="/user">-->
<!--        <i class="el-icon-s-custom"></i> 用户管理-->
<!--      </el-menu-item>-->
<!--      <el-menu-item index="/file">-->
<!--        <i class="el-icon-document"></i> 文件管理-->
<!--      </el-menu-item>-->
<!--      <el-menu-item index="/role">-->
<!--        <i class="el-icon-user"></i> 角色管理-->
<!--      </el-menu-item>-->
<!--      <el-menu-item index="/menu">-->
<!--        <i class="el-icon-menu"></i> 菜单管理-->
<!--      </el-menu-item>-->
<!--    </el-submenu>-->
<!--    <el-menu-item index="/checkin">-->
<!--      <i class="el-icon-s-claim"></i><span slot="title">签到</span>-->
<!--    </el-menu-item>-->

  </el-menu>
</template>

<script>
export default {
  props: ['isCollapse'],
  data(){
    return {
      //获取到该用户所有的菜单列表
      menuList: localStorage.getItem("menuList") ? JSON.parse(localStorage.getItem("menuList")) : []
    }
  }
}
</script>

<style>
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
